<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:o="http://omnifaces.org/ui"
                xmlns:shiro="http://shiro.apache.org/tags"
                template="/WEB-INF/layout/template.xhtml">

    <ui:define name="content">
        <h:panelGroup>
            <shiro:guest>嗨，guest，请<a href="login.xhtml">登录</a>！</shiro:guest>
            <shiro:user>嗨，<shiro:principal/>，你好呀！<br/>需要<h:link value="/logout">退出</h:link>系统吗？</shiro:user>!
        </h:panelGroup>

        <o:form id="loginForm" includeViewParams="true">
            <p:panel header="登录">
                <h:panelGrid columns="3">
                    <h:panelGroup>
                        <h:outputText class="ui-icon ui-icon-person" style="display: inline-block"/>
                        <p:outputLabel for="username" value="用户："/>
                    </h:panelGroup>
                    <p:inputText id="username"
                                 value="#{credentials.username}"
                                 placeholder="用户"
                                 required="true"
                                 requiredMessage="必须输入用户名"/>
                    <h:message for="username" />

                    <h:panelGroup>
                        <h:outputText class="ui-icon ui-icon-key" style="display: inline-block"/>
                        <p:outputLabel for="password" value="口令："/>
                    </h:panelGroup>
                    <p:password id="password"
                                value="#{credentials.password}"
                                placeholder="口令"
                                required="true"
                                requiredMessage="必须输入口令"/>
                    <h:message for="password" />

                    <p:outputLabel for="captcha" value="验证码："/>
                        <p:inputText id="captcha"
                                     value="#{credentials.captcha}"
                                     placeholder="验证码(不区分大小写)"
                                     required="true"
                                     requiredMessage="必须输入验证码(不区分大小写)"/>
                    <h:panelGroup>
                        <a href="#" onclick="refreshCaptcha()">
                            <h:graphicImage id="captchaImage"
                                            value="/resources/images/kaptcha.jpg"
                                            alt="验证码"
                                            title="点击本图片可更新验证码"/>
                        </a>
                        <script type="text/javascript">
                            function refreshCaptcha() {
                                $("#loginForm\\:captchaImage").attr("src", "#{request.contextPath}/resources/images/kaptcha.jpg?r=" + Math.random());
                            }
                        </script>
                    </h:panelGroup>

                    <p:outputLabel for="rememberMe" value="记住我："/>
                    <p:selectBooleanCheckbox id="rememberMe" value="#{credentials.rememberMe}"/>
                    <h:panelGroup/>

                    <h:panelGroup/>
                    <p:commandButton value="登录"
                                     action="#{identity.login}"
                                     icon="ui-icon-unlocked"
                                     update="@form"/>
                    <h:panelGroup styleClass="error"
                                  rendered="#{not facesContext.validationFailed}">
                        #{shiroLoginFailure}
                    </h:panelGroup>
                </h:panelGrid>
            </p:panel>
        </o:form>
    </ui:define>
</ui:composition>
